<template>
  <div class="login-config">
    <div v-if="!showSecondary" class="main">
      <div class="login-info">
        <Form
          :model="formState"
          style="width: 1010px"
          :label-col="{ style: { width: '210px' } }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          label-align="right"
          :colon="false"
        >
          <FormItem name="JE_CORE_VERIFY" class="JE_CORE_VERIFY" :label="$t('login.loginMethod')">
            <CheckboxGroup
              v-model:value="formState.JE_CORE_VERIFY"
              :options="plainOptions"
              class="my-checkbox"
            />
            <div class="text">
              <i>{{ $t('login.loginMethodTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="JE_CORE_PHONELOGIN" class="JE_CORE_PHONELOGIN" :label="$t('login.code')">
            <Select
              v-model="formState.JE_CORE_PHONELOGIN"
              :allow-clear="false"
              :default-value="formState.JE_CORE_PHONELOGIN"
              :options="selectCode"
              class="myInput"
              @change="($event) => handleChange('JE_CORE_PHONELOGIN', $event)"
            >
            </Select>
            <div class="text">
              <i>{{ $t('login.codeTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="JE_CORE_PHONEREPASSWORD"
            class="JE_CORE_PHONEREPASSWORD"
            :label="$t('login.retrieve')"
          >
            <Select
              v-model="formState.JE_CORE_PHONEREPASSWORD"
              :allow-clear="false"
              :default-value="formState.JE_CORE_PHONEREPASSWORD"
              :options="selectPassword"
              class="myInput"
              @change="($event) => handleChange('JE_CORE_PHONEREPASSWORD', $event)"
            >
            </Select>
            <div class="text">
              <i>{{ $t('login.retrieveTip1') }}</i>
              <br />
              <i class="i-red">{{ $t('login.retrieveTip2') }}</i>
            </div>
          </FormItem>
          <FormItem name="JE_SYS_FASTLOGIN" class="JE_SYS_FASTLOGIN">
            <template #label> &nbsp;{{ $t('login.fast') }} </template>
            <CheckboxGroup
              v-model:value="formState.JE_SYS_FASTLOGIN"
              :options="loginOptions"
              class="my-checkbox"
            />
            <div class="text">
              <i>{{ $t('login.fastTip') }}</i>
            </div>
          </FormItem>
        </Form>
      </div>
      <!-- <div class="login-method">
        <je-list
          :show="true"
          class="JE_SYS_WXQUICKLOGIN"
          :title="$t('login.wx')"
          :info="$t('login.wxTip')"
          :is-show="true"
          @listClick="($event) => listClick('JE_SYS_WXQUICKLOGIN', $event)"
        />
        <je-list
          :show="true"
          class="JE_SYS_DDQUICKLOGIN"
          :title="$t('login.dd')"
          :info="$t('login.ddTip')"
          :is-show="true"
          @listClick="($event) => listClick('JE_SYS_DDQUICKLOGIN', $event)"
        />
        <je-list
          :show="true"
          class="JE_SYS_FSQUICKLOGIN"
          :title="$t('login.fs')"
          :info="$t('login.fsTip')"
          :is-show="true"
          @listClick="($event) => listClick('JE_SYS_FSQUICKLOGIN', $event)"
        />
        <je-list
          :show="true"
          class="JE_SYS_QQQUICKLOGIN"
          :title="$t('login.qq')"
          :info="$t('login.qqTip')"
          :is-show="true"
          @listClick="($event) => listClick('JE_SYS_QQQUICKLOGIN', $event)"
        />
        <je-list
          :show="true"
          class="JE_SYS_WLQUICKLOGIN"
          :title="$t('login.weLink')"
          :info="$t('login.weLinkTip')"
          :is-show="true"
          @listClick="($event) => listClick('JE_SYS_WLQUICKLOGIN', $event)"
        />
      </div> -->
    </div>
    <div v-else class="secondary">
      <LoginSecondary :secondary-name="secondaryName" :data-all="dataAllSon" @showMain="showMain" />
    </div>
  </div>
</template>

<script>
  import LoginSecondary from './login-secondary.vue';
  import { Form, Checkbox, Select, Modal } from '@jecloud/ui';
  // import JeList from '@/components/je-list.vue';
  import { onMounted, onUnmounted, reactive, ref } from 'vue';
  import { useOpenDialog } from '@/hooks';
  import VueEvent from '@/helper/model/event';
  import { saveConfigData } from '@/api';
  import { onScroll, scrollToTop } from '@/utils/utils';
  import { useI18n } from '@common/locales';

  export default {
    name: 'LoginConfig',
    components: {
      Form,
      FormItem: Form.Item,
      CheckboxGroup: Checkbox.Group,
      // Input,
      Select,
      // JeList,
      LoginSecondary,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      // 保存数据
      const dataAllSon = reactive(props.dataAll);
      // 表单数据
      let formState = reactive({
        JE_CORE_VERIFY: 'ACCOUNT,PHONE',
        JE_CORE_PHONELOGIN: '',
        JE_CORE_PHONEREPASSWORD: '',
        JE_SYS_FASTLOGIN: 'JE_SYS_WXQUICKLOGIN',
      });
      // 对比项
      let meta = {};
      let res = {};
      // 转换数据用于回显
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return item.key === 'LoginConfig';
        });
        res[0]?.items.find((item) => {
          formState[item.code] = item['value'];
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);

      const dataCallback = (data) => {
        changeDataType(data);
      };

      // 是否改变
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };

      // 点击左侧导航栏，是否允许跳转
      const isSaveCallback = () => {
        if (showSecondary.value) return false;
        if (isChange()) return changeBar();
        useOpenDialog({
          attribute: 'login-config',
          allFields: JSON.stringify(formState),
        });
      };

      // 修改快捷登录
      const handleChange = (code, e) => {
        formState[code] = e;
      };

      const I18n = useI18n().messages.zh_CN;
      // 下拉框选项
      const selectCode = reactive([
        { value: '1', label: I18n.yes },
        {
          value: '0',
          label: I18n.no,
        },
      ]);
      const selectPassword = reactive([
        { value: '1', label: I18n.yes },
        {
          value: '0',
          label: I18n.no,
        },
      ]);

      const plainOptions = [
        { value: 'USERNAME', label: I18n.login.name },
        { value: 'ACCOUNT', label: I18n.login.id, disabled: true },
        { value: 'PHONE', label: I18n.login.phone },
        { value: 'EMAIL', label: I18n.login.mail },
      ];
      const loginOptions = [
        { value: 'JE_SYS_WXQUICKLOGIN', label: I18n.login.wx },
        { value: 'JE_SYS_DDQUICKLOGIN', label: I18n.login.dd },
        // { value: 'JE_SYS_FSQUICKLOGIN', label: I18n.login.fs },
        // { value: 'JE_SYS_QQQUICKLOGIN', label: I18n.login.qq },
        // { value: 'JE_SYS_WLQUICKLOGIN', label: I18n.login.weLink },
        // { value: 'JE_SYS_QUICKLOGIN', label: I18n.login.app },
      ];

      // 子页面是否打开
      const showSecondary = ref(false);
      // 相应子页面
      const secondaryName = ref(null);

      // 点击跳转到相应子页面
      const listClick = (val, bol) => {
        showSecondary.value = bol;
        secondaryName.value = val;
      };

      // 打开子页面
      const showMain = (val) => {
        showSecondary.value = val;
      };

      // 点击保存的回调
      const clickCallback = () => {
        if (!isChange()) {
          // 修改表单数据请求
          saveConfigData({
            attribute: 'login-config',
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            // 子页面已显示，就不弹出提示
            !showSecondary.value && Modal.notice('保存成功', 'success'),
            VueEvent.emit('changeAllData', { item: 'login-config', formState }),
          );
        } else {
          // 如果显示了子页面就不提示
          if (!showSecondary.value) {
            Modal.notice('无数据操作!', 'info');
          }
        }
      };

      // 是否允许切换左侧导航栏
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };

      // 去子页面的回调
      const toSubpage = (data) => {
        const { name, parentName } = { ...data };
        if (parentName) {
          listClick(name, true);
        }
      };
      // 回滚到顶部
      onMounted(() => {
        scrollToTop();
      });

      // 搜索：动画及滚动
      const onScrolled = () => {
        showSecondary.value = false;
        setTimeout(() => {
          onScroll();
        }, 100);
      };
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('sendData', dataCallback);
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('toSubpage', toSubpage);
      VueEvent.on('fadeScroll', onScrolled);
      onUnmounted(() => {
        VueEvent.off('toolbarSaveEvent', clickCallback);
        VueEvent.off('sendData', dataCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('toSubpage', toSubpage);
        VueEvent.off('fadeScroll', onScrolled);
      });

      return {
        formState,
        plainOptions,
        loginOptions,
        showSecondary,
        listClick,
        showMain,
        selectCode,
        selectPassword,
        secondaryName,
        handleChange,
        dataAllSon,
      };
    },
  };
</script>

<style lang="less" scoped>
  .login-config {
    font-size: 14px;
    :deep(.my-checkbox) {
      margin-top: 2px;
    }
    color: #333333;
    .login-info {
      width: 100%;
      padding: 30px 0;
    }
    .login-method {
      padding: 0 0 90px 90px;
      // padding: 0 20px 80px 20px;
    }
    .i-red {
      color: #93c074;
    }
  }
</style>
